<template>
	<view class="container">
		<image :src="bannerUrl" mode="" class="banner"></image>
		<u-sticky>
			<u-tabs 
				:list="list" 
				active-color="#19be6b" 
				:is-scroll="false" 
				:current="current" 
				@change="sectionChange" 
				height="90"
				bar-width="60"
				bg-color="#f7f7f7"
			></u-tabs >
		</u-sticky>
		<!-- 协会介绍 -->
		<view class="about" v-if="current == 0" style="margin-top: 0;">
			<view class="subscribe">
				<!-- <u-divider half-width="40" margin-bottom="30" fontSize="32">关于我们</u-divider> -->
				<view class="form">
					<rich-text :nodes="introInfo.content"></rich-text>
				</view>
			</view>
			<view class="subscribe">
				<!-- <u-divider half-width="40" margin-bottom="30" fontSize="32">品牌文化</u-divider> -->
				<view class="brand">
					<view class="brand_item">
						<view class="brand_txt">
							<text>品牌宗旨</text>
							<text>健康养生思想潮流</text>
						</view>
						<view class="brand_img">
							<image src="../../static/zongzhi.png" mode=""></image>
						</view>
					</view>
					<view class="brand_item">
						<view class="brand_img">
							<image src="../../static/gongsishiming.png" mode=""></image>
						</view>
						<view class="brand_txt">
							<text>品牌使命</text>
							<text>一心为您身心更健康</text>
						</view>
					</view>
					<view class="brand_item">
						<view class="brand_txt">
							<text>品牌愿景</text>
							<text>弘扬中医养生文化</text>
						</view>
						<view class="brand_img">
							<image src="../../static/yuanjingmubiao.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 协会新闻 -->
		<view class="news" v-if="current == 1">
			<view class="news_body">
				<view class="news_item" @click="pageTo(item.id)" v-for="(item, index) in newsList" :key="index">
					<view class="item_txt">
						<view class="">
							<text class="title">{{ item.title }}</text>
							<text class="desc">{{ item.description }}</text>
						</view>
						<text class="time">{{ item.createtime_text }}</text>
					</view>
					<view class="item_img">
						<image :src="item.imageUrl" mode=""></image>
					</view>
				</view>
			</view>
			<view class="nomore">
				<u-loadmore :status="newsStatus" />
			</view>
		</view>
		<!-- 会员风采 -->
		<view class="news" v-if="current == 2">
			<view class="elegant_demeanor">
				<view
					class="elegant_demeanor_item"
					@click="previewImg(item.id)" 
					v-for="(item,index) in memberList" 
					:key="index">
					<image :src="item.imageUrl" mode=""></image>
					<text class="title">{{ item.title }}</text>
					<!-- <view class="nums">
						<u-icon name="photo"></u-icon>
						<text>2张</text>
					</view> -->
				</view>
			</view>
			<view class="nomore">
				<u-loadmore :status="memberStatus" />
			</view>
		</view>
		<!-- 联系协会 -->
		<view class="news" v-if="current == 3">
			<view class="contact">
				<view class="contact_item" @click="makePhone">
					<u-icon name="phone" size="50" color="#4caf50"></u-icon>
					<view class="txt">
						<text>联系方式</text>
						<text>{{ info.contact_tel }}</text>
					</view>
					<text class="tips">拨打电话</text>
				</view>
				<view class="contact_item" @click="copyWX">
					<u-icon name="weixin-fill" size="50" color="#4caf50"></u-icon>
					<view class="txt">
						<text>微信号</text>
						<text>{{ info.wechat }}</text>
					</view>
					<text class="tips">点击可复制</text>
				</view>
				<view class="contact_item" @click="nav">
					<u-icon name="map" size="60" color="#4caf50"></u-icon>
					<view class="txt">
						<text>地址</text>
						<text>{{ info.address }}</text>
					</view>
					<text class="tips">导航</text>
				</view>
				<map 
					style="width: 100%; height: 300px;" 
					:latitude="latitude" 
					:longitude="longitude" 
					:markers="covers"
				></map>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { 
		contactUs, 
		Intro, 
		NewsList, 
		memberList,
		RecommendBanner
	} from '../../api/api'
	export default {
		data() {
			return {
				list: [{
					name: '协会介绍'
				}, {
					name: '协会新闻'
				}, {
					name: '会员风采',
				}, {
					name: '联系协会',
				}],
				current: 0,
				latitude: '',
				longitude: '',
				covers: [{
				    latitude: '',
				    longitude: '',
					callout: {
						content: '',
						display: 'ALWAYS',
						color: '#4CD964',
						padding: 10
					}
				}],
				info: {}, // 联系协会信息
				introInfo: {} ,// 协会介绍信息
				newsList: [], // 新闻列表
				pageIndex: 1,
				newsStatus: 'loading',
				memberList: [],
				memberStatus: 'loading',
				bannerUrl: ''
			};
		},
		onLoad(options) {
			if(options.cur) this.current = options.cur
			this.getIntro()
			this.getBanner()
		},
		watch: {
			current(val) {
				this.pageIndex = 1
				switch(val) {
					case '0': 
						this.getIntro();
						break;
					case '1': 
						this.newsStatus = 'loading';
						this.newsList = [];
						this.getNewsList();
						break;
					case '2':
						this.memberStatus = 'loading';
						this.memberList = [];
						this.getMemberList();
						break;
					case '3':
						this.getContactUsInfo();
						break;
				}
			}
		},
		methods: {
			// 获取banner
			getBanner () {
				RecommendBanner({ id: 15 }).then(res => {
					if(res.code == 1) {
						this.bannerUrl = res.data[0].imageUrl
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 获取联系协会资料
			getContactUsInfo() {
				contactUs().then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.latitude = res.data.map_coordinates.split(',')[0]
						this.longitude = res.data.map_coordinates.split(',')[1]
						this.covers[0].latitude = res.data.map_coordinates.split(',')[0]
						this.covers[0].longitude = res.data.map_coordinates.split(',')[1]
						this.covers[0].callout.content = res.data.address
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 获取协会介绍内容
			getIntro() {
				Intro({id: 2}).then(res => {
					if(res.code == 1) {
						this.introInfo = res.data
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 新闻列表
			getNewsList() {
				if (this.newsStatus == 'nomore') return
				NewsList({ page: this.pageIndex, limit: 10 }).then(res => {
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.newsStatus = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.newsStatus = 'nomore'
						}
						this.newsList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 会员风采列表
			getMemberList() {
				if (this.memberStatus == 'nomore') return
				memberList({page: this.pageIndex, limit: 10}).then(res => {
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.memberStatus = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.memberStatus = 'nomore'
						}
						this.memberList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			
			// tab切换事件
			sectionChange(index) {
				this.current = index + '';
			},
			pageTo (id) {
				uni.navigateTo({
					url: `news_detail?id=${id}`
				})
			},
			previewImg (id) {
				uni.navigateTo({
					url: '/pages/notice/member_detail?id=' + id
				})
			},
			// 拨打电话
			makePhone () {
				uni.makePhoneCall({
					phoneNumber: this.info.contact_tel
				})
			},
			// 复制微信
			copyWX () {
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
				    data: this.info.wechat,
				    success: function () {
				        console.log('success');
				    }
				});
				// #endif
			},
			// 导航
			nav () {
				uni.openLocation({
				    latitude: Number(this.latitude),
				    longitude: Number(this.longitude),
					name: this.info.address,
				    success: () => {},
					fail: (err) => {
						this.$u.toast(err.errMsg)
					}
				});
			}
		},
		onReachBottom() {
			this.pageIndex++;
			switch(this.current) {
				case '0': 
				
					break;
				case '1': 
					this.getNewsList();
					break;
				case '2':
					this.getMemberList();
					break;
				case '3':
				
					break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}
	
	.container {
		position: relative;
		width: 100%;
		.banner {
			width: 100%;
			height: 175rpx;
		}
		.news {
			width: 100%;
			background-color: #fff;
			padding: 0 25rpx;

			.news_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 30rpx 0;

				text {
					position: relative;
					font-size: 32rpx;
					font-weight: 700;
					padding-left: 30rpx;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 8rpx;
						height: 100%;
						border-radius: 4rpx;
						background-color: #4CD964;
					}
				}
			}

			.news_body {
				width: 100%;

				.news_item {
					display: flex;
					align-items: center;
					width: 100%;
					border-bottom: 1px solid #eee;
					padding: 20rpx 0;

					.item_txt {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;

						.title {
							display: block;
							width: 500rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 32rpx;
							margin-bottom: 10rpx;
						}

						.desc {
							display: block;
							width: 500rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #999;
						}

						.time {
							color: #999;
							margin-top: 10rpx;
						}
					}

					.item_img {
						width: 160rpx;
						height: 120rpx;

						image {
							width: 160rpx;
							height: 120rpx;
							border-radius: 8rpx;
						}
					}
				}
			}

			.elegant_demeanor {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;
				padding: 25rpx 0;
				.elegant_demeanor_item {
					position: relative;
					width: 48%;
					margin-bottom: 30rpx;
					box-shadow: 0 0 10rpx 5rpx #e8e8e8;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 320rpx;
					}

					.title {
						display: block;
						width: 100%;
						padding: 15rpx 0 15rpx 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.nums {
						position: absolute;
						bottom: 90rpx;
						right: 10rpx;
						display: flex;
						background-color: rgba(0,0,0, .5);
						border-radius: 30rpx;
						color: #fff;
						padding: 5rpx 20rpx;
						text {
							margin-left: 10rpx;
						}
					}
				}
			}

			.content {
				padding: 20rpx 0;
				text {
					display: block;
					text-indent: 2em;
					text-align: justify;
					margin-bottom: 20rpx;
				}
				image {
					width: 100%;
					margin-bottom: 20rpx;
				}
			}
		
			.contact {
				width: 100%;
				padding-top: 30rpx;
				.contact_item {
					position: relative;
					display: flex;
					width: 100%;
					background-color: #eee;
					margin-bottom: 20rpx;
					border-left: 2px solid #4CD964;
					padding: 30rpx 50rpx;
					.txt {
						display: flex;
						flex-direction: column;
						margin-left: 50rpx;
						line-height: 50rpx;
						color: #999;
						text:first-child {
							color: #000;
							font-size: 32rpx;
						}
						text:last-child {
							display: block;
							width: 360rpx;
						}
					}
					.tips {
						position: absolute;
						top: 50%;
						right: 30rpx;
						transform: translate(0, -50%);
					}
				}
			}
		}
		.about {
			width: 100%;
			.subscribe {
				width: 100%;
				// padding: 30rpx 0 0;
				// margin-bottom: 20rpx;
				background-color: #fff;
				.form {
					padding: 30rpx;
					border-top: 1px solid #eee;
					text-align: justify;
					line-height: 50rpx;
				}
				.brand {
					border-top: 1px solid #eee;
					.brand_item {
						display: flex;
						
						width: 100%;
						.brand_txt, .brand_img {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 50%;
							height: 230rpx;
							text:last-child {
								color: #999;
								margin-top: 5rpx;
							}
							image {
								width: 100rpx;
								height: 100rpx;
							}
						}
						.brand_img {
							background-color: #f7f7f7;
						}
					}
				}
			}
		}
		
		.nomore {
			background-color: #fff;
			padding: 30rpx 0;
		}
	}
</style>
